<template>
  <div class="home">
    <!-- 顶部选项卡 -->
    <div class="header">
      <van-tabs v-model="activeTab" @change="list1(activeTab)" sticky>
        <van-tab title="首页" name="0"></van-tab>
        <van-tab title="爱情" name="3"></van-tab>
        <van-tab title="玄幻" name="1"></van-tab>
        <van-tab title="历史" name="4"></van-tab>
        <van-tab title="都市" name="2"></van-tab>
      </van-tabs>
      <div class="search-icon" @click="goToSearch">
        <van-icon name="search" size="20"/>
      </div>
    </div>

    <!-- 轮播图 -->
    <van-swipe class="banner" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" class="banner-img"/>
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐列表 -->
    <div class="recommendations">
      <div class="section-header">
        <span class="title">编辑推荐</span>
        <van-icon name="replay" class="refresh-icon" @click="refreshRecommendations"/>
      </div>
      <div class="book-grid">
        <div v-for="(item, index) in noveldata"
             :key="index"
             @click="novel(item.id)"
             class="book-item">
          <img :src="item.url" class="book-cover"/>
          <div class="book-title">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTabbar" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="records" to="/task">任务</van-tabbar-item>
      <van-tabbar-item icon="bookmark-o" to="/bookshelf">书架</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HomeView',
  data() {
    return {
      activeTab: 0,
      activeTabbar: 0,
      carouselItems: [
        { image: 'https://acai-reading.oss-cn-beijing.aliyuncs.com/%E5%89%91%E6%9D%A5.png' },
        { image: 'https://acai-reading.oss-cn-beijing.aliyuncs.com/%E9%81%AE%E5%A4%A9.png' },
        { image: 'https://acai-reading.oss-cn-beijing.aliyuncs.com/%E9%9B%AA%E4%B8%AD.png' },
      ],
      noveldata: [],
      bannerList: [], // 广告列表
      currentAdIndex: 0, // 当前显示广告的索引
      defaultPicture: 'https://via.placeholder.com/150', // 默认占位图片
    }
  },


  created() {
    this.list();
    this.banner();
  },


  methods: {
    list1(sort){
      if(sort == 0){
        this.list()
      }else{
        axios.post(`http://localhost:9999/api-novel/novel/find?sort=${sort}`).then(res => {
          console.log(res.data)
          this.noveldata = res.data;
        })
      }

    },
    novel(id){
      this.$router.push({path: '/noveldetails',query: {id: id}})
    },

    refreshRecommendations() {
      // 刷新推荐列表的方法
      console.log('刷新推荐列表')
    },

    list(){
      axios.post(`http://localhost:9999/api-novel/novel/list`).then(res => {
        console.log(res.data)
        this.noveldata = res.data;
      })
    },

    goToSearch() {
      this.$router.push('/search')
    },
    // 请求广告数据
    banner() {
      this.axios
          .post("http://localhost:9999/api-tagclass-service/banner/list")
          .then((res) => {
            this.bannerList = res.data;
          })
          .catch((error) => {
            console.error("请求失败:", error);
          });
    },
  },
}
</script>

<style scoped>
.home {
  padding-bottom: 50px;
}

.banner {
  height: 200px;
  margin-bottom: 15px;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommendations {
  padding: 0 15px;
}
.big-box {
  display: flex;
  flex-wrap: nowrap; /* 不换行，保持横排 */
  gap: 15px; /* 控制小盒子之间的间距 */
  justify-content: space-between; /* 小盒子等距分布 */
  overflow-x: auto; /* 超出部分滚动显示 */
}

.small-box {
  flex: 0 0 calc(25% - 10px); /* 每个小盒子固定宽度（可根据需要调整） */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.small-box-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.small-box-title {
  font-size: 14px;
  color: #333;
  text-align: center;
  line-height: 1.5;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.refresh-icon {
  font-size: 16px;
  color: #666;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.book-cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.book-title {
  font-size: 14px;
  color: #333;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  width: 100%;
  height: 40px;
  line-height: 20px;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
}

.header .van-tabs {
  flex: 1;
}

.search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  padding: 8px;
}

:deep(.van-tabs__wrap) {
  padding-right: 40px;
}
</style>
